<template>
  <view-page>
    <div class="bg"></div>

    <div class="container">
      <div class="header-title">
        <div class="left">
          <span class="material-symbols-outlined">chevron_left</span>
          <span class="text">检测详情</span>
        </div>
      </div>
      <ReportCard :reportList="reportList" />

      <div class="step">
        <van-steps :active="active">
          <van-step>
            <div class="step-text">
              <span class="date">2023年10月</span>
              <span>待审核</span>
            </div>
            <!-- 待审核 -->
          </van-step>
          <van-step>
            <div class="step-text">
              <span class="date">2023年10月20日</span>
              <span>已受理</span>
            </div>
            <!-- 已受理 -->
          </van-step>
          <van-step>
            检测中
          </van-step>
          <van-step>
            已完结
          </van-step>
        </van-steps>
      </div>

      <div class="warp">
        <div class="info">
          <div class="info-title">样品信息</div>
          <div class="code">编号：JC20230502</div>
        </div>
        <div class="info-item top">
          <div class="label">实验单位</div>
          <div class="value">提高采收率研究中心</div>
        </div>
        <div class="info-item">
          <div class="label">样品类别</div>
          <div class="value">油；气</div>
        </div>
        <div class="info-item">
          <div class="label">检测项目</div>
          <div class="value">锆石U-Pb定年分析; 锶同位素分析（岩石）</div>
        </div>
        <div class="info-item">
          <div class="label">样品状态</div>
          <div class="value">固体；液体</div>
        </div>
        <div class="info-item">
          <div class="label">样品送达</div>
          <div class="value">邮寄</div>
        </div>
        <div class="block-desc">
          <span>王洋 18636368969</span>
          <span>北京市海淀区学院路20号实验一区116号房间</span>
        </div>
        <div class="info-item">
          <div class="label">剩样处理</div>
          <div class="value">
            邮寄到付<span class="desc">（寄回送样地址）</span>
          </div>
        </div>
        <div class="info-item">
          <div class="label">备注</div>
          <div class="value">备注</div>
        </div>
        <div class="title">费用结算</div>
        <div class="pay">
          <span class="label">总支付金额：</span>
          <div class="money">
            <span class="num">20,000元</span>
            <span class="currency">人民币</span>
          </div>
        </div>
        <div class="pay-status">
          <span class="material-icons" style="margin-right: 5px">
            verified_user </span
          >已支付完成
        </div>
        <div class="split-line"></div>
        <div class="title">检测报告</div>
        <PdfList />

        <div class="btn">
          <ButtonView type="default" :block="true" @touchstart="$router.go(-1)"
            >返回</ButtonView
          >
        </div>
      </div>
    </div>
    <CardView />
    <FooterView />
  </view-page>
</template>

<script setup>
import {ref} from 'vue'
import CardView from '@/components/Footer/CardView'
import ButtonView from '@/components/ButtonView.vue'
import FooterView from '@/components/Footer/FooterView.vue'
import ReportCard from './ReportCard.vue'
import PdfList from './PdfList.vue'

const active = ref(2)

const reportList = ref([
  {
    id: 1,
    title: '热解有机碳；总有机碳；',
    count: 2,
    status: '院内',
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558',
  },
])
</script>

<style scoped lang="scss">

.container {
  position: relative;
  // margin-top: dpi(13rem);
  z-index: 1;
  .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: dpi(5rem);
    .left {
      display: flex;
      align-items: center;
      color: #fff;
      font-family: swiper-icons;
      text-transform: none !important;
      letter-spacing: 0;
      font-variant: initial;
      line-height: 1;
      .icon {
        &::after {
          font-family: swiper-icons;
          content: 'prev';
        }
      }
      .text {
        margin-left: dpi(4rem);
        font-family: PingFangSC-Semibold;
        font-size: dpi(4rem);
        color: #ffffff;
      }
    }
  }

  .warp {
    padding: 0 dpi(3rem);
  }

  .info {
    display: flex;
    justify-content: space-between;
    margin: dpi(5rem) 0;
    .info-title {
      font-family: PingFangSC-Medium;
      font-size: dpi(3rem);
      color: #05204d;
    }
    .code {
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: #0571b0;
    }
  }

  .info-item {
    border-bottom: 1px solid #dddddd;
    padding-bottom: dpi(3rem);
    &:not(&.top) {
      padding-top: dpi(4rem);
    }
    .label {
      font-family: PingFangSC-Semibold;
      font-size: dpi(2rem);
      color: #0571b0;
    }
    .value {
      margin-top: dpi(3rem);
      font-family: PingFangSC-Regular;
      font-size: dpi(3rem);
      color: #05204d;
      .desc {
        font-family: PingFangSC-Regular;
        font-size: dpi(3rem);
        color: #888888;
      }
    }
  }

  .block-desc {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: dpi(14rem);
    padding: dpi(4rem);
    margin: dpi(4rem) 0;
    background-color: #f5f5f5;
    span {
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: #565656;
      &:not(&:last-child) {
        margin-bottom: 5px;
      }
    }
  }
}

.title {
  margin: dpi(5rem) 0;
  font-family: PingFangSC-Medium;
  font-size: dpi(3rem);
  color: #05204d;
}
.pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: dpi(13rem);
  padding: 0 dpi(4rem) 0 dpi(3rem);
  background-color: #f5f5f5;
  .label {
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #05204d;
  }
  .currency {
    text-align: right;
    font-family: PingFangSC-Semibold;
    font-size: dpi(2rem);
    color: #05204d;
  }
  .money {
    display: flex;
    flex-direction: column;
  }
  .num {
    margin-bottom: dpi(1rem);
    font-family: PingFangSC-Semibold;
    font-size: dpi(3rem);
    color: #0571b0;
  }
}

.pay-status {
  display: flex;
  align-items: center;
  padding: dpi(5rem) 0 dpi(7rem) 0;
  font-family: PingFangSC-Medium;
  font-size: dpi(3rem);
  color: #0571b0;
}

.split-line {
  height: 1px;
  background-color: #dddddd;
}

.btn {
  margin: dpi(6rem) 0;
}

.step{
  margin: 0 dpi(4rem);
  padding-bottom: dpi(2rem);
  padding-top: dpi(3rem);
  border-radius: 2px;
  box-shadow: 0rem dpi(1rem) dpi(3rem) 0rem rgba(5, 32, 77, 0.1);
  ::v-deep{
    .van-steps{
      padding-top: 22px !important;
    }
  }
}

.step-text{
  width: 100%;
  position: relative;
  .date{
    position: absolute;
    display: inline-block;
    top: -20px;
    width: 90px;
    color: #565656;
    transform: scale(.8);
    transform-origin: left;
  }
}
</style>
